<template>
	<view class="layout">
		<uni-segmented-control :current="current" :values="values" @clickItem="onClickItem" styleType="button" activeColor="#007aff"></uni-segmented-control>

		<view class="card" v-for="(item, index) in pets" :key="item._id">
			<view class="pic">
				<image :src="item.url" mode="widthFix" @click="preView(index)"></image>
			</view>
			<view class="text">{{ item.content }}</view>
		</view>

		<view class="more">
			<uni-load-more status="loading"></uni-load-more>
		</view>

		<view class="icon" @click="backTop">
			<uni-icons type="arrow-up" size="36"></uni-icons>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue';

const pets = ref([]);
const segmentedArr = [
	{"key":"all","value":"全部"},
	{"key":"dog","value":"狗"},
	{"key":"cat","value":"猫"}
	]
const current = ref(0)
//通过计算属性
const values = computed(()=>{
	return segmentedArr.map(item=>item.value)
})
console.log(values);

const postType = computed(()=>{
	return segmentedArr.map(item=>item.key)
})
console.log(postType);

const getPets = function () {
	uni.request({
		url: '/tools/petShow',
		data: {
			size: 10,
			type: postType.value[current.value]
		},
		header: {
			'access-key': 'qapl7511'
		}
	})
		.then((res) => {
			console.log(res.data);
			pets.value = [...pets.value, ...res.data.data];
		})
		.catch((err) => {
			console.log(err);
		})
		.finally(() => {
			uni.stopPullDownRefresh(); //停止下拉刷新
		});
};
//预览照片
const preView = function (index) {
	console.log(index);
	const urls = pets.value.map((item) => item.url);
	uni.previewImage({
		current: index,
		urls: urls
	});
};

// 返回最上面
function backTop() {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 150
	});
}

// 点击切换请求数据
function onClickItem(e){
	current.value = e.currentIndex
	pets.value = []
	getPets()
}

// 页面加载自动获取宠物照片
onLoad(() => {
	getPets();
});

// 页面到达底部自动获取新照片
onReachBottom(() => {
	getPets();
});

// 页面下拉刷新
onPullDownRefresh(() => {
	pets.value = [];
	getPets();
});
</script>


<style scoped lang="scss">
.layout {
	padding: 50rpx;
	
	.segmented-control{
		margin-bottom: 25rpx;
	}
	
	.card {
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
		border-radius: 15rpx;
		margin-bottom: 50rpx;
		.pic {
			image {
				width: 100%;
			}
		}
		.text {
			padding: 60rpx;
		}
	}
	.icon {
		position: fixed;
		right: 50rpx;
		bottom: 50rpx;
		background-color: #eee;

		margin: 0 auto;
		border-radius: 50%;
	}
}
</style>
